<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="业务" prop="businessType">
      <el-select
        v-model="ruleForm.businessType"
        placeholder="请选择"
        @change="onChangeBusinessType"
      >
        <el-option
          v-for="item in business_type_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="订单类型" prop="orderType">
      <el-select v-model="ruleForm.orderType" placeholder="请选择">
        <el-option
          v-for="item in order_type_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="推送规则" prop="ruleType">
      <span>订单状态为</span>
      <el-select v-model="ruleForm.ruleType" placeholder="请选择">
        <el-option
          v-for="item in order_state_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span>，立即提醒</span>
    </el-form-item>
    <el-form-item label="消息内容" prop="msg">
      <el-input
        v-model="ruleForm.msg"
        type="textarea"
        maxlength="30"
      />
    </el-form-item>

    <el-form-item label="附加字段" prop="other_files">
      <el-checkbox-group v-model="ruleForm.other_files">
        <el-checkbox
          v-for="(item, index) in other_files_options"
          :key="index"
          v-model="ruleForm.other_files[index]"
          :label="item.label"
        >{{ item.label }}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  business_type_options,
  orderStateOptions,
  orderTypeOptions,
  otherFilesOptions
} from '../config'
export default {
  name: 'DialogFormData',
  data() {
    return {
      // 业务选取列表
      business_type_options,
      ruleForm: {
        businessType: 1,
        orderType: '',
        ruleType: '',
        msg: '',
        other_files: []
        // broadcastState: false,
        // appState: false,
        // bisState: false,
        // mpState: false
      },
      rules: {
        businessType: [
          { required: true, message: '请选择请选择业务', trigger: 'change' }
        ],
        orderType: [
          { required: true, message: '请选择订单类型', trigger: 'change' }
        ],
        ruleType: [
          { required: true, message: '请选择订单类型', trigger: 'change' }
        ],
        msg: [
          { required: true, message: '请填写消息内容', trigger: 'blur' }
        ],
        other_files: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个附加字段',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    order_type_options() {
      return orderTypeOptions.filter(
        v => v.type === this.ruleForm.businessType
      )
    },
    // 订单状态
    order_state_options() {
      return orderStateOptions.filter(
        v =>
          v.shop_type === this.ruleForm.businessType &&
          v.order_type === this.ruleForm.orderType
      )
    },

    // 附加字段
    other_files_options() {
      return otherFilesOptions.filter(
        v => v.type === this.ruleForm.businessType
      )
    }
  },
  methods: {
    setQuery(data) {
      this.ruleForm = { ...data }
      console.log('setQuery', this.ruleForm)
    },
    getQuery() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const extraColumnArr = []
            this.other_files_options.map(v => {
              if (this.ruleForm.other_files.includes(v.label)) {
                extraColumnArr.push(1)
              } else {
                extraColumnArr.push(0)
              }
            })
            this.ruleForm.extraColumn = parseInt(extraColumnArr.join(''), 2)
            console.log(extraColumnArr, this.ruleForm.extraColumn)
            resolve(this.ruleForm)
          } else {
            reject(false)
            return false
          }
        })
      })
    },
    onChangeBusinessType() {
      this.ruleForm.orderType = this.order_type_options[0].value
    }
  }
}
</script>

<style scoped></style>
